<template>
  <div class="account-settings">
    <!-- 日志类型选择 -->
    <div class="log-type-selector">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="操作日志" name="operation">
          <div class="log-content">
            <div class="log-header">
              <h4>操作日志</h4>
              <div class="log-actions">
                <el-button size="small" @click="refreshLogs">刷新</el-button>
                <el-button size="small" type="primary" @click="exportLogs">导出</el-button>
              </div>
            </div>
            <el-table :data="operationLogs" style="width: 100%" size="small">
              <el-table-column prop="time" label="时间" width="180" />
              <el-table-column prop="action" label="操作" width="120" />
              <el-table-column prop="description" label="描述" />
              <el-table-column prop="ip" label="IP地址" width="120" />
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'" size="small">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="登录日志" name="login">
          <div class="log-content">
            <div class="log-header">
              <h4>登录日志</h4>
              <div class="log-actions">
                <el-button size="small" @click="refreshLogs">刷新</el-button>
                <el-button size="small" type="primary" @click="exportLogs">导出</el-button>
              </div>
            </div>
            <el-table :data="loginLogs" style="width: 100%" size="small">
              <el-table-column prop="time" label="登录时间" width="180" />
              <el-table-column prop="ip" label="IP地址" width="120" />
              <el-table-column prop="device" label="设备信息" width="150" />
              <el-table-column prop="location" label="登录地点" width="120" />
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'" size="small">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="系统日志" name="system">
          <div class="log-content">
            <div class="log-header">
              <h4>系统日志</h4>
              <div class="log-actions">
                <el-button size="small" @click="refreshLogs">刷新</el-button>
                <el-button size="small" type="primary" @click="exportLogs">导出</el-button>
              </div>
            </div>
            <el-table :data="systemLogs" style="width: 100%" size="small">
              <el-table-column prop="time" label="时间" width="180" />
              <el-table-column prop="level" label="级别" width="80">
                <template #default="scope">
                  <el-tag :type="getLogLevelType(scope.row.level)" size="small">
                    {{ scope.row.level }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="module" label="模块" width="120" />
              <el-table-column prop="message" label="消息" />
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="安全日志" name="security">
          <div class="log-content">
            <div class="log-header">
              <h4>安全日志</h4>
              <div class="log-actions">
                <el-button size="small" @click="refreshLogs">刷新</el-button>
                <el-button size="small" type="primary" @click="exportLogs">导出</el-button>
              </div>
            </div>
            <el-table :data="securityLogs" style="width: 100%" size="small">
              <el-table-column prop="time" label="时间" width="180" />
              <el-table-column prop="event" label="安全事件" width="120" />
              <el-table-column prop="description" label="描述" />
              <el-table-column prop="ip" label="IP地址" width="120" />
              <el-table-column prop="severity" label="严重程度" width="100">
                <template #default="scope">
                  <el-tag :type="getSeverityType(scope.row.severity)" size="small">
                    {{ scope.row.severity }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 日志统计 -->
    <div class="log-statistics">
      <el-row :gutter="20">
        <el-col :span="6" v-for="stat in logStats" :key="stat.id">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="24">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部操作 -->
    <div class="settings-footer">
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Document, 
  Monitor, 
  Warning, 
  DataAnalysis 
} from '@element-plus/icons-vue'

export default {
  name: 'AccountSettings',
  components: {
    Document,
    Monitor,
    Warning,
    DataAnalysis
  },
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'logout'],
  setup() {
    const activeTab = ref('operation')

    // 操作日志
    const operationLogs = ref([
      {
        time: '2024-12-19 09:30:15',
        action: '登录',
        description: '用户登录系统',
        ip: '192.168.1.100',
        status: '成功'
      },
      {
        time: '2024-12-19 09:35:22',
        action: '修改密码',
        description: '用户修改账户密码',
        ip: '192.168.1.100',
        status: '成功'
      },
      {
        time: '2024-12-19 10:15:45',
        action: '更新信息',
        description: '用户更新个人信息',
        ip: '192.168.1.100',
        status: '成功'
      },
      {
        time: '2024-12-19 11:20:30',
        action: '导出数据',
        description: '用户导出个人数据',
        ip: '192.168.1.100',
        status: '成功'
      }
    ])

    // 登录日志
    const loginLogs = ref([
      {
        time: '2024-12-19 09:30:15',
        ip: '192.168.1.100',
        device: 'Chrome 120.0.0.0',
        location: '辽宁省沈阳市',
        status: '成功'
      },
      {
        time: '2024-12-18 15:20:30',
        ip: '192.168.1.101',
        device: 'Firefox 121.0',
        location: '辽宁省沈阳市',
        status: '成功'
      },
      {
        time: '2024-12-17 08:45:12',
        ip: '192.168.1.102',
        device: 'Safari 17.0',
        location: '辽宁省沈阳市',
        status: '失败'
      }
    ])

    // 系统日志
    const systemLogs = ref([
      {
        time: '2024-12-19 09:30:15',
        level: 'INFO',
        module: '用户认证',
        message: '用户登录成功'
      },
      {
        time: '2024-12-19 09:35:22',
        level: 'INFO',
        module: '密码管理',
        message: '密码修改成功'
      },
      {
        time: '2024-12-19 10:15:45',
        level: 'WARN',
        module: '数据验证',
        message: '邮箱格式验证失败'
      },
      {
        time: '2024-12-19 11:20:30',
        level: 'ERROR',
        module: '文件导出',
        message: '导出文件时发生错误'
      }
    ])

    // 安全日志
    const securityLogs = ref([
      {
        time: '2024-12-19 09:30:15',
        event: '登录成功',
        description: '用户从可信IP地址登录',
        ip: '192.168.1.100',
        severity: '低'
      },
      {
        time: '2024-12-17 08:45:12',
        event: '登录失败',
        description: '检测到异常登录尝试',
        ip: '192.168.1.102',
        severity: '高'
      },
      {
        time: '2024-12-16 14:30:25',
        event: '密码重置',
        description: '用户通过邮箱重置密码',
        ip: '192.168.1.100',
        severity: '中'
      }
    ])

    // 日志统计
    const logStats = ref([
      {
        id: 1,
        label: '今日操作',
        value: '156',
        icon: 'Document'
      },
      {
        id: 2,
        label: '登录次数',
        value: '12',
        icon: 'Monitor'
      },
      {
        id: 3,
        label: '安全事件',
        value: '3',
        icon: 'Warning'
      },
      {
        id: 4,
        label: '系统错误',
        value: '1',
        icon: 'DataAnalysis'
      }
    ])

    const handleTabClick = (tab) => {
      ElMessage.info(`切换到${tab.props.label}`)
    }

    const refreshLogs = () => {
      ElMessage.success('日志已刷新')
    }

    const exportLogs = () => {
      ElMessage.success('日志导出成功')
    }

    const getLogLevelType = (level) => {
      const types = {
        'INFO': 'info',
        'WARN': 'warning',
        'ERROR': 'danger',
        'DEBUG': 'success'
      }
      return types[level] || 'info'
    }

    const getSeverityType = (severity) => {
      const types = {
        '低': 'success',
        '中': 'warning',
        '高': 'danger'
      }
      return types[severity] || 'info'
    }

    return {
      activeTab,
      operationLogs,
      loginLogs,
      systemLogs,
      securityLogs,
      logStats,
      handleTabClick,
      refreshLogs,
      exportLogs,
      getLogLevelType,
      getSeverityType
    }
  }
}
</script>

<style scoped>
.account-settings {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.log-type-selector {
  flex: 1;
  overflow: hidden;
}

.log-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.log-header h4 {
  margin: 0;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 600;
}

.log-actions {
  display: flex;
  gap: 10px;
}

.log-statistics {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.stat-icon {
  margin-right: 12px;
  color: var(--primary-color);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-color-secondary);
}

.settings-footer {
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
  text-align: center;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f8f9fa;
  color: var(--text-color);
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

/* 标签页样式 */
.el-tabs__header {
  margin-bottom: 20px;
}

.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e9ecef;
}

.el-tabs__item {
  font-weight: 500;
  color: var(--text-color-secondary);
}

.el-tabs__item.is-active {
  color: var(--primary-color);
  font-weight: 600;
}

.el-tabs__active-bar {
  background-color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .account-settings {
    padding: 16px;
  }
  
  .log-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .log-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .stat-card {
    margin-bottom: 10px;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table .cell {
    padding: 8px;
  }
}

/* 滚动条样式 */
.log-content::-webkit-scrollbar {
  width: 4px;
}

.log-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.log-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 